body {    
	display: grid;
    height: 100%;
	font-family: "Georgia", "Times New Roman", Times, serif;
	font-size: 1.5em;
	background-size: 100% 130%;	
	background-image: url("iarna.png");
	background-repeat: no-repeat;
}
p {font-size: 0.8em;}
img {float: right;}
#masthead {
	text-align: center;
	width: 100%;
}
#navigation {display: inline-block;
	position: relative;
	float: left;
	width: 20%;
	margin-top: 320px;
	margin-bottom: 10px;
}
#content {display: flex;
	float: left;
	position: relative;
	width: 80%;
	margin-top: -510px;
	margin-left: 170px;
	padding: 10px;
	border-radius: 45px;
	
}
#content1 {display: inline-block;
	float: left;
	position: relative;
	width: 80%;
	margin-top: -540px;
	margin-left: 170px;
	padding: 10px;
	border-radius: 45px;
	
}
#content2 {display: inline-block;
	float: left;
	position: relative;
	width: 80%;
	margin-top: -450px;
	margin-left: 170px;
	padding: 10px;
	border-radius: 45px;
	
}
#content3 {display: block;
	float: left;
	position: relative;
	width: 32%;
	margin-top: -550px;
	margin-left: 170px;
	padding-left: 10px;
}
#content4 {display: block;
	float: left;
	position: relative;
	width: 32%;
	margin-top: -550px;
	margin-left: 340px;
	padding-left: 10px;
}
#content5 {display: block;
	float: left;
	position: relative;
	width: 32%;
	margin-top: -550px;
	margin-left: 510px;
	padding-left: 10px;
}
#content6 {display: block;
	float: left;
	position: relative;
	width: 32%;
	margin-top: -550px;
	margin-left: 680px;
	padding-left: 10px;
}
#content7 {display: block;
	float: left;
	position: relative;
	width: 32%;
	margin-top: -550px;
	margin-left: 850px;
	padding-left: 10px;
}
#content8 {display: block;
	float: left;
	position: relative;
	width: 32%;
	margin-top: -550px;
	margin-left: 1020px;
	padding-left: 10px;
}
#content9 {display: block;
	float: left;
	position: relative;
	width: 10%;
	margin-top: -550px;
	margin-left: 1190px;
	padding-left: 10px;
}
#content10 {display: block;
	float: left;
	position: relative;
	width: 10%;
	margin-top: -550px;
	margin-left: 1360px;
	padding-left: 10px;
}
#footer {display: inline-block;
	text-align: center;
	width: 100%;
    border:#0000FF 3px solid;
    border-radius: 45px;
}
#masthead h1 {
	color: #000080;
}
#masthead h3,h2 {
	color: #004AAD;
}
#content1 p,a {color: #004AAD;}
#content h1,h2,h3,h4,h5,h6 {
	color: #004AAD;
}
#footer a {
	border-color: #0000FF;
	color: #004AAD;
	text-decoration: underline;
}
#footer a:hover {
	color: #004AAD;
	text-decoration: none;
}
.Btn {
    position: relative;
    width: 150px;
    height: 55px;
    border-radius: 45px;
    border: none;
    background-color: rgb(60, 188, 255);
    color: white;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
		font-size: 1.2em;
}
.Btne {
    position: relative;
    width: 110px;
    height: 45px;
    border-radius: 45px;
    border: none;
	background-color: rgb(107, 167, 241);
    color: red;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: inline-block;
    align-items: center;
    justify-content: center;
		font-size: 0.7em;
}
.Btnex {
    position: relative;
    width: 155px;
    height: 70px;
    border-radius: 45px;
    border: none;
	background-color: rgb(107, 167, 241);
    color: red;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: inline-block;
    align-items: center;
    justify-content: center;
		font-size: 0.5em;
}
.Btn0 {
    position: relative;
    width: 90px;
    height: 45px;
    border-radius: 45px;
    border: none;
	background-color: rgb(60, 188, 255);
    color: red;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: inline-block;
    align-items: center;
    justify-content: center;
		font-size: 0.7em;
}
.Btn1 {
    position: relative;
    width: 90px;
    height: 45px;
    border-radius: 45px;
    border: none;
	background-image:url("email.png");
    color: red;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: inline-block;
    align-items: center;
    justify-content: center;
		font-size: 0.7em;
}
.Btn2 {
    position: relative;
    width: 200px;
    height: 120px;
    border-radius: 45px;
    border: none;
	background-image:url("email.png");
	background-size: 100% 90%;	
    color: red;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: inline-block;
    align-items: center;
    justify-content: center;
	font-size: 0.7em;
}
.Btn3 {
    position: relative;
    width: 200px;
    height: 120px;
    border-radius: 45px;
    border: none;
	background-image:url("oa.png");
	background-size: 100% 90%;	
    color: red;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: inline-block;
    align-items: center;
    justify-content: center;
	font-size: 0.7em;
}
.Btn4 {
    position: relative;
    width: 200px;
    height: 120px;
    border-radius: 45px;
    border: none;
	background-image:url("catalog.png");
	background-size: 100% 90%;	
    color: red;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: inline-block;
    align-items: center;
    justify-content: center;
	font-size: 0.7em;
}
.Btn5 {
    position: relative;
    width: 200px;
    height: 120px;
    border-radius: 45px;
    border: none;
	background-image:url("365.png");
	background-size: 100% 90%;	
    color: red;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: inline-block;
    align-items: center;
    justify-content: center;
	font-size: 0.7em;
}
.Btn6 {
    position: relative;
    width: 200px;
    height: 120px;
    border-radius: 45px;
    border: none;
	background-image:url("bebras.png");
	background-size: 100% 90%;	
    color: red;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: inline-block;
    align-items: center;
    justify-content: center;
	font-size: 0.7em;
}
.Btn7 {
    position: relative;
    width: 200px;
    height: 120px;
    border-radius: 45px;
    border: none;
	background-image:url("cisco.png");
	background-size: 100% 90%;	
    color: red;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: inline-block;
    align-items: center;
    justify-content: center;
	font-size: 0.7em;
}
.Bmic
{
	position: relative;
    width: 150px;
    height: 55px;
    border-radius: 45px;
    border: none;
    background-color: rgb(60, 188, 120);
    color: white;
    box-shadow: 0px 10px 10px rgb(60, 180, 110) inset,
        0px 5px 10px rgba(60, 180, 110, 0.212),
        0px -10px 10px rgb(60, 180, 110) inset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
	font-size:1.1em;
}
.Btn::before {
    width: 70%;
    height: 2px;
    position: absolute;
    background-color: rgba(60, 188, 255, 0.7);
    content: "";
    filter: blur(1px);
    top: 7px;
    border-radius: 50%;
}
.Btn::after {
    width: 70%;
    height: 2px;
    position: absolute;
    background-color: rgba(60, 188, 255, 0.1);
    content: "";
    filter: blur(1px);
    bottom: 7px;
    border-radius: 50%;
}
.Btn0:hover, .Btn:hover, .Btne:hover, .Btnex:hover, .Bmic:hover, .Btn2:hover,.Btn3:hover,.Btn4:hover,.Btn5:hover,.Btn6:hover,.Btn7:hover, .Btn1:hover {
    animation: jello-horizontal 0.9s both;
}
@keyframes jello-horizontal {
    0% {transform: scale3d(1, 1, 1);}
    30% {transform: scale3d(1.25, 0.75, 1);}
    40% {transform: scale3d(0.75, 1.25, 1);}
    50% {transform: scale3d(1.15, 0.85, 1);}
    65% {transform: scale3d(0.95, 1.05, 1);}
    75% {transform: scale3d(1.05, 0.95, 1);}
    100% {transform: scale3d(1, 1, 1);}
}
.messagedefilant {
  display: block;
  margin: 40px auto;
  border-radius: 40px;
  padding: 0;
  overflow: hidden;
  position: relative;
  width: 50%;
  max-width: 1300px;
  height: 60px;
}
.messagedefilant div {
  position: absolute;
  min-width: 100%;
}
.messagedefilant div:after {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  white-space: nowrap;
  top:0;
}
.messagedefilant div:after {
  position: absolute;
  top:0; left:0;
  content:attr(data-text);
  animation: defilement2 10s infinite linear;
  background: #bcd;
}
@keyframes defilement2 {
  0% { margin-left: 100%; }
  100% { margin-left: -100%; }
}
.container 	{
			position: relative;
			top: 0%;
			height: 30%;
			display: flex;
			justify-content: right;
			align-items: right;
			}
.container1 	{
			position: relative;
			top: 10%;
			height: 10%;
			display: flex;
			justify-content: center;
			align-items: center;
			}
.circle 	{
			position: absolute;
			background: transparent;
			width: calc(var(--i)* 2.5vmin);
			aspect-ratio: 1;
			border-radius: 75%;
			border: 3px solid rgb(0, 255,13);
			transform-style: preserve-3d;
			transform: rotateX(70deg) translateZ(50px);
			animation: animate 3s ease-in-out calc(var(--i)*0.08s) infinite;
			box-shadow: 0 0 15px rgb(124, 124, 124),inset 0 0 15px rgb(124, 124, 124);
			}
@keyframes animate {
					0%,
					100% {transform: rotateX(60deg) translateZ(50px) translateY(0);filter: hue-rotate(0);}
					75% {transform: rotateX(60deg) translateZ(50px) translateY(-45vmin); filter: hue-rotate(180deg);}
					50% {transform: rotateX(60deg) translateZ(50px) translateY(-90vmin); filter: hue-rotate(360deg);}
					}
img.santa {  width: 100px;  height: 100px;}
img.targ {  width: 100px;  height: 100px;  transition: width 2s, height 4s, background-color 3s;}
img.targ:hover {  width: 800px;  height: 700px;}
ul {position: relative; transform: skewY(-15deg);}
li {font-size: 20px;position: relative; list-style:none; width:135px;height: 20px; padding-bottom: 45px; background: #39bebb;z-index: calc(1*var(--i));transition:0.5s;}
li:hover {background: #3988bb;transform: translateX(-50px);}
li::before{font-family: "FontAwesome";color:#999;display:flex;justify-content:center;align-items:left;content:"";position:absolute;top:0;left:-20px; width: 20px;height:100%;background: #62C9C7; transform-origin: right;transform: skewY(45deg);transition:0.5s;}
li:hover::before{background:#7b5190;}
li::after {content:""; position: absolute; top:-20px; left:0px; width:100%; height:20px; background: #62C9C7; transform-origin: bottom; transform: skewX(45deg); transition:0.5s;}
li:hover::after{background:#86589d;}
li a {text-decoration:none;color:#0000ff;display:block; letter-spacing:0.01em;transition:0.5s;}
li:hover a{color:#fff;}
li:last-child::after{box-shadow:-120px 120px 20px rgba(0,0,0,0.25);}